import React, {Component} from "react";
import {StyleSheet, Animated} from "react-native";

export default class StickyHeader extends Component<any, any> {
    state = {
        stickyLayoutY: 0,
    };
    _onLayout = (event: any) => {
        this.setState({
            stickyLayoutY: event.nativeEvent.layout.y,
        });
    };
    static defaultProps = {
        style: {},
    };
    render() {
        const {stickyHeaderY, stickyScrollY, children, style} = this.props;
        const {stickyLayoutY} = this.state;
        const y = stickyHeaderY !== -1 ? stickyHeaderY : stickyLayoutY;
        const translateY = stickyScrollY.interpolate({
            inputRange: [-1, 0, y, y + 1],
            outputRange: [0, 0, 0, 1],
        });
        return (
            <Animated.View onLayout={this._onLayout} style={[styles.container, style, {transform: [{translateY}]}]}>
                {children}
            </Animated.View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        zIndex: 100,
    },
});
